<template>
    
    <div class="default-main ba-table-box" style="">
        <!-- <el-scrollbar v-loading="false" class="ba-table-form-scrollbar" style="height: calc(100vh - 20px)" :native="false"> -->
        <div class="merge-box" style="width: 100%; height: calc(100vh - 10px); overflow: auto;">
            <div style="max-width: 1800px; margin: 0 auto; padding: 10px 10px;">
                <el-alert class="ba-table-alert" title="合并订单" type="info" show-icon />

                <el-card class="box-card">
                    <div>
                        <span class="mr-5" style="position: relative; top: 5px;">订单类型：</span>
                        <span :class="[state.type == -999 ? 'btn btn-info mr-5' : 'btn mr-5']" @click="state.type = -999">全部</span>
                        <span :class="[state.type == 0 ? 'btn btn-info mr-5' : 'btn mr-5']" @click="state.type = 0">样品</span>
                        <span :class="[state.type == 1 ? 'btn btn-info mr-5' : 'btn mr-5']" @click="state.type = 1">正式</span>
                    </div>
                    <div style="margin-top: 15px;">
                        <span class="mr-5" style="position: relative; top: -2px; ">订单状态：</span>
                        <span :class="[state.status.length == 0 || state.status == state.allStatus ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="state.status = []">全部</span>
                        <span :class="[state.status.includes(0) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(0)">准备下单</span>
                        <span :class="[state.status.includes(1) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(1)">已下单</span>
                        <span :class="[state.status.includes(2) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(2)">现货</span>
                        <span :class="[state.status.includes(3) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(3)">付款预定</span>
                        <span :class="[state.status.includes(4) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(4)">口头预定</span>
                        <span :class="[state.status.includes(10) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(10)">已提货</span>
                        <span :class="[state.status.includes(5) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(5)">入库</span>
                        <span :class="[state.status.includes(6) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(6)">韩国已发货</span>
                        <span :class="[state.status.includes(7) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(7)">待定</span>
                        <span :class="[state.status.includes(-1) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(-1)">取消订单</span>
                        <span :class="[state.status.includes(8) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(8)">退款</span>
                        <span :class="[state.status.includes(9) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(9)">换货</span>
                    </div>
                    <div style="margin-top: 3px;">
                        <span class="mr-5" style="display: inline-block;">
                            <FormItem
                                label="商品品牌："
                                type="string"
                                v-model="state.goods_and_brand"
                                :input-attr="{
                                    clearable: true,
                                }"
                                placeholder="请输入品牌或商品名称"
                                style="width: 260px; margin-right: 12px;"
                            />
                        </span>
                        <span>
                            <span class="demonstration ml-5" style="">下单时间：</span>
                            <el-date-picker
                                v-model="state.place_order_time"
                                type="daterange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                :shortcuts="shortcuts"
                                style="position: relative; top: 2px; max-width: calc(100% - 72px); margin-right: 12px;" 
                            />
                        </span>
                        <span style="position: relative; top: -2px;">
                            <span class="btn ml-12" style="margin-right: 12px;" @click="search()">查询</span>
                            <span class="btn btn-success" @click="exportOrder()">导出表格</span>
                        </span>
                        
                    </div>


                    <!-- 表格顶部菜单 -->
                    <!-- <TableHeader
                        :buttons="['refresh']"
                        :quick-search-placeholder="t('quick Search Placeholder', { fields: t('order.quick Search Fields') })"
                    /> -->
                    <!-- 表格 -->
                    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
                    <div style="margin: 0 -20px;">
                        <Table ref="tableRef" :pagination="false">
                            <template #batch_operate>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column label="更改状态" width="248" align="center">
                                    <template #default="scope" slot-scope="scope">
                                        <div style="height: 195px; vertical-align: middle; display: table-cell; width: 280px;">
                                            <div style="width: 100%;">
                                                <div class="withdraw-box" style="text-align: center; width: 100%; display: block;">
                                                    <div class="btn btn-danger" @click="withdrawStatus(scope.row)">撤回状态</div>
                                                </div>
                                                <div class="operate-btn" style="text-align: center;">

                                                    <!-- 准备下单 -->
                                                    <div v-if="scope.row.status == 0">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 1)">已下单</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                    </div>

                                                    <!-- 已下单 -->
                                                    <div v-if="scope.row.status == 1">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 7 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 7)">待定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 4 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 4)">口头预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                        </span>
                                                    </div>

                                                    <!-- 现货 -->
                                                    <div v-if="scope.row.status == 2">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 5 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 5)">入库</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 入库 -->
                                                    <div v-if="scope.row.status == 5">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 韩国已发货 -->
                                                    <div v-if="scope.row.status == 6">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 换货 -->
                                                    <div v-if="scope.row.status == '9-1' || scope.row.status == '9-2' || scope.row.status == '9-3' || scope.row.status == '9-4'">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 10 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 10)">已提货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                        </span>
                                                    </div>

                                                    <!-- 已提货 -->
                                                    <div v-if="scope.row.status == 10">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 5 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 5)">入库</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 付款预定 -->
                                                    <div v-if="scope.row.status == 3">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 10 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 10)">已提货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                        </span>
                                                    </div>

                                                    <!-- 口头预定 -->
                                                    <div v-if="scope.row.status == 4">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 7 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 7)">待定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                    </div>

                                                    <!-- 待定 -->
                                                    <div v-if="scope.row.status == 7">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 4 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 4)">口头预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                    </div>
                                                    
                                                    
                                                </div>
                                                <!-- 现货数量 -->
                                                <div v-if="scope.row.current_status == 2" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.stock_split" :value="[scope.row.stock_split ? scope.row.stock_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 入库数量 -->
                                                <div v-if="scope.row.current_status == 5" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.storage_split" :value="[scope.row.storage_split ? scope.row.storage_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 韩国已发货数量 -->
                                                <div v-if="scope.row.current_status == 6" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.krw_split" :value="[scope.row.krw_split ? scope.row.krw_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 提货数量 -->
                                                <div v-if="scope.row.current_status == 10" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.delivery_split" :value="[scope.row.delivery_split ? scope.row.delivery_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 付款预定 天数 数量 -->
                                                <div v-if="scope.row.current_status == 3" style="margin-bottom: 10px;">
                                                    <span style="width: 80px; display: inline-block; margin-right: 5px;">
                                                        <el-input v-model="scope.row.pay_reserve_day_split" placeholder="天数" type="number" />
                                                    </span>
                                                    <span style="width: 80px; display: inline-block;">
                                                        <el-input v-model="scope.row.pay_reserve_num_split" :value="[scope.row.pay_reserve_num_split ? scope.row.pay_reserve_num_split : scope.row.num]" placeholder="数量" type="number" />
                                                    </span>
                                                </div>
                                                <!-- 口头预定 天数 数量 -->
                                                <div v-if="scope.row.current_status == 4" style="margin-bottom: 10px;">
                                                    <span style="width: 80px; display: inline-block; margin-right: 5px;">
                                                        <el-input v-model="scope.row.verbal_reserve_day_split" placeholder="天数" type="number" />
                                                    </span>
                                                    <span style="width: 80px; display: inline-block;">
                                                        <el-input v-model="scope.row.verbal_reserve_num_split" :value="[scope.row.pay_reserve_num_split ? scope.row.pay_reserve_num_split : scope.row.num]" placeholder="数量" type="number" />
                                                    </span>
                                                </div>
                                                <!-- 换货类型 -->
                                                <div v-if="scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4'" style="margin-bottom: 10px;">
                                                    <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-1' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-1')">颜色</span>
                                                    <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-2' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-2')">尺码</span>
                                                    <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-3')">瑕疵</span>
                                                    <span style="padding: 0 8px;" :class="[scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-4')">款式</span>
                                                </div>
                                                <!-- 退款类型 -->
                                                <div v-if="scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3'" style="margin-bottom: 10px;">
                                                    <span style="margin-right: 5px;" :class="[scope.row.current_status == '8-1' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-1')">延迟</span>
                                                    <span style="margin-right: 5px;" :class="[scope.row.current_status == '8-2' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-2')">断货</span>
                                                    <span :class="[scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-3')">特殊</span>
                                                </div>

                                                <div @click="saveStatus(scope.row, scope.$index)" v-if="scope.row.current_status != null && scope.row.current_status != undefined && scope.row.current_status != -999 && scope.row.current_status != 9" class="btn confirm-btn">
                                                    <div>确定</div>
                                                </div>
                                            </div>
                                            
                                            
                                            
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                            <template #note>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column label="备注" align="center" min-width="350" class-name="note">
                                    <template #default="scope">
                                        <div class="note-box" style="height: 195px; display: grid; grid-template-rows: 163px 32px;">
                                            <div class="note-content-box" style="align-self: flex-start; text-align: left; height: 163px; overflow: auto;">
                                                <div v-for="(item, key) in scope.row.suborder_note" :key="key">
                                                    <span>{{ item.admin.username }}：</span>
                                                    <span>{{ item.content }}</span>
                                                    <span style="margin-left: 5px;">
                                                        <el-popconfirm title="确定要删除这个备注吗?" @confirm="delNote(item.id, key, scope.row)">
                                                            <template #reference>
                                                                <Icon name="el-icon-Delete" color="#bd362f" size="15" style="position: relative; top: 2px; cursor: pointer;" />
                                                            </template>
                                                        </el-popconfirm>
                                                        
                                                    </span>
                                                    
                                                </div>
                                            </div>
                                            <div style="align-self: flex-end; height: 32px; text-align: left;">
                                                <el-input v-model="scope.row.new_note" placeholder="" style="width: calc(100% - 70px);" />
                                                <span class="btn" style="width: 50px; margin-left: 5px;" @click="addNote(scope.row.order_goods_id, scope.row.new_note, scope.row)">提交</span>
                                            </div>
                                        </div>
                                        
                                    </template>
                                </el-table-column>
                            </template>
                            <template #shipment_status>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column label="出货状态" align="center" width="150" class-name="shipment-status">
                                    <template #default="scope">
                                        <!-- 自定义 -->
                                        <div>
                                            <el-text class="mx-1" size="">
                                                {{ scope.row.status_text }}<span v-if="scope.row.status == 3">{{ scope.row.pay_reserve_day }}天</span><span v-if="scope.row.status == 4">{{ scope.row.verbal_reserve_day }}天</span>
                                            </el-text>
                                        </div>
                                        <!-- <div style="margin-top: 5px;">
                                            <span class="btn" v-blur @click="popupShipmentStatus(scope.row.id)">操作记录</span>
                                        </div> -->
                                    </template>
                                </el-table-column>
                            </template>
                            <template #brand_name>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column label="品牌名" align="center" width="110" class-name="split-log">
                                    <template #default="scope">
                                        <!-- 自定义 -->
                                        <div>
                                            <el-text class="mx-1" size="">
                                                {{ scope.row.brand_name }}
                                            </el-text>
                                        </div>
                                        <!-- <div style="margin-top: 5px;" v-if="scope.row.hasSubOrderGoods != null">
                                            <span class="btn" v-blur @click="popupSplitRecord(scope.row.id)">拆分记录</span>
                                        </div> -->
                                    </template>
                                </el-table-column>
                            </template>
                        </Table>
                    </div>
                    
                    <!-- 表单 -->
                    <PopupForm />
                    <OperateLog 
                        v-if="shipment_data.show" 
                        :show="shipment_data.show" 
                        :id="shipment_data.id"
                        @hideShipmentStatusLog="hideShipmentStatusLog" 
                        @loadShipmentStatusLog="loadShipmentStatusLog"
                    />
                    
                    <SplitRecord 
                        v-if="splitRecordData.show" 
                        :show="splitRecordData.show" 
                        :id="splitRecordData.id"
                        @hideSpliteRecord="hideSpliteRecord" 
                    />
                </el-card>
            </div>
            
        </div>
        <!-- </el-scrollbar> -->
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, markRaw, h, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import OperateLog from './operate_log.vue'
import SplitRecord from './split_record.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'

import FormItem from '/@/components/formItem/index.vue'

import renderOrderNum from './render/order_num.vue';
import renderPurchasePrice from './render/purchase_price.vue';
import renderColor from './render/color.vue';
import renderSize from './render/size.vue';

import { updateStatusApi, withdrawStatusApi, addNoteApi, delNoteApi, exportOrderApi } from '/@/api/frontend/order/merge'

const state = reactive({
    brand_id: 0, // 商品品牌
    place_order_time: '', // 下单时间
    user_id: 0, // 用户ID
    username: '', // 用户账号
    goods_and_brand: '', // 品牌和商品名称
    goods_name: '', // 商品名称
    type: -999, // 订单类型
    status: [], // 订单状态
    allStatus: [-999, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
})

const shipment_data = reactive({
    show: false,
    id: 0,
})
const splitRecordData = reactive({
    show: false,
    id: 0,
})

const shortcuts = [{ // 自定义日期
    text: '昨天',
    value: () => {
        const end = new Date()
        const start = new Date()
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
        return [start, end]
    },
},{
    text: '今天',
    value: () => {
        const end = new Date()
        const start = new Date()
        return [start, end]
    },
},{
    text: '3天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
        return [start, end]
    },
},{
    text: '7天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
    },
},{
    text: '15天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
        return [start, end]
    },
},{
    text: '30天内',
    value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
    },
}];

const popupShipmentStatus = (id: number) => {

    baTable.form.operate = 'shipment_status';
    shipment_data.id = id;
    shipment_data.show = true;
}

const popupSplitRecord = (id: number) => {

    baTable.form.operate = 'split_status';
    splitRecordData.id = id;
    splitRecordData.show = true;
}

const search = () => {
    console.log(state);
    load()
}

const exportOrder = () => {
    exportOrderApi(state).then((e) => {
        console.log(e);
        if(e.code == 1){
            location.href = e.data.file_url;
        }
    })
}

const clickStatus = (status: number) => {
    if(state.status.includes(status)){
        state.status.forEach((item, i) => {
            if (item == status) {
                state.status.splice(i, 1); // 从下标 i 开始, 删除 1 个元素
            }
        })
    }else{
        state.status.push(status);
    }
}

const delNote = (id: number, key: number, row: anyObj) => {
    delNoteApi(id).then((e) => {
        if(e.code == 1){
            row.suborder_note.splice(key, 1);
        }
    })
}

// 隐藏
const hideShipmentStatusLog = () => {
    shipment_data.show = false;
}
const hideSpliteRecord = () => {
    splitRecordData.show = false;
}
// 重新加载直播订单表格
const loadShipmentStatusLog = () => {
}

/**
 * 添加备注
 * @param order_goods_id 子订单id
 * @param note 备注内容
 */
const addNote = (order_goods_id: number, note: string, row: anyObj) => {
    let data = {
        suborder_id: order_goods_id,
        content: note
    }
    addNoteApi(data).then((e) => {
        console.log(e);
        if(e.code == 1){
            row.new_note = '';
            row.suborder_note.push(e.data)
        }
    })
}


/**
 * 点击出货状态按钮
 * @param row 当前行数据
 * @param value 更改后的状态值
 */
const setShipmentStatus = (row, value) => {
    row.current_status = row.current_status == value ? -999 : value;
}

// 撤回出货状态
const withdrawStatus = (row: anyObj) => {
    withdrawStatusApi(row.order_goods_id).then((e) => {
        console.log(e)
        if(e.code == 1){
            row.status_text = e.data.status_text;
            row.status = e.data.status;
            row.current_status = -999;
        }
    })
}

// 更新出货状态
const saveStatus = (row: anyObj, index: number) => {
    console.log(row);
    
    updateStatusApi(row).then((e) => {
        console.log(e)
        if(e.code == 1){
            
            row.status_text = e.data.row.status_text;
            row.status = e.data.row.status;
            row.num = e.data.row.num;
            row.total_price_text = e.data.row.total_price_text;
            row.pay_reserve_day = e.data.row.pay_reserve_day;
            row.verbal_reserve_day = e.data.row.verbal_reserve_day;
            row.current_status = -999;

            if(e.data.split_order){
                baTable.table.data!.splice(index + 1, 0, e.data.split_order);
            }
            
        }
    })
}

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(['edit', 'delete'])
const baTable = new baTableClass(
    new baTableApi('/user/order.Merge/'),
    {
        pk: 'id',
        column: [
            { 
                label: t('品牌名'), 
                prop: 'brand_name', 
                align: 'center', 
                sortable: false,
                render: 'slot', 
                slotName: 'brand_name',
            },
            { label: t('商品图'), prop: 'goods_cover', align: 'center', render: 'image', operator: false },
            { label: t('商品名'), prop: 'goods_name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { 
                label: t('颜色'), 
                prop: 'color', 
                align: 'center', 
                operator: false,
                render: 'customRender',
                customRender: markRaw(renderColor)
            },
            { 
                label: t('尺码'), 
                prop: 'size', 
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                render: 'customRender',
                customRender: markRaw(renderSize)
            },
            { label: t('品牌原价'), prop: 'price_text', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('采购价格'), prop: 'supply_price_text', align: 'center', operator: 'RANGE', sortable: false },
            { 
                label: t('DC价格'), 
                prop: 'purchase_price_text', 
                align: 'center', 
                operator: 'RANGE', 
                sortable: false,
                render: 'customRender', 
                customRender: markRaw(renderPurchasePrice),
            },
            { 
                label: t('数量'), 
                prop: 'num', 
                align: 'center', 
                sortable: false,
                render: 'customRender', 
                customRender: markRaw(renderOrderNum),
            },
            { label: t('总价'), prop: 'total_price_text', align: 'center', sortable: false },
            // { 
            //     label: t('出货状态'), 
            //     prop: 'id', 
            //     align: 'center', 
            //     sortable: false,
            //     width: 130,
            //     render: 'customRender', 
            //     customRender: markRaw(ShipmentStatus),
            // },
            { 
                label: t('出货状态'), 
                prop: 'id', 
                align: 'center', 
                sortable: false,
                render: 'slot', 
                slotName: 'shipment_status',
            },
            
            // { 
            //     label: t('批量更改状态'), 
            //     prop: 'id', 
            //     align: 'center', 
            //     sortable: false, 
            //     width: 320,
            //     render: 'slot', 
            //     slotName: 'batch_operate',
            //     renderHeader: function({ column, $index }){
            //         return BatchOperateHeader(column, $index)
            //     }
            // },
            // { 
            //     label: t('备注'), 
            //     prop: 'note', 
            //     align: 'center', 
            //     operatorPlaceholder: t('Fuzzy query'), 
            //     operator: 'LIKE', 
            //     sortable: false,
            //     render: 'slot', 
            //     slotName: 'note'
            // }
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: { user_id: null, out_trade_no: null, seller: null, house_number: 0, seller_name: null, goods_image: null, supplement_images: null, color: null, size: null, category: null, number: 0, purchase_price: 0, total_price: 0, type: null, option: 0, note: null, draft: 1, shipment_status: null, place_order_time: 0 },
    }
)

provide('baTable', baTable)

const load = () => {
    baTable.table.filter!.state = state;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}



const batch = reactive({
    shipment: [{a:1}]
})

defineExpose({load});

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
})




const BatchOperateHeader = (column, index) => {
    return h('div', {class: 'batch-header'}, [
        h('span', {
            class: 'batch-header-btn btn',
            onClick: (column, index) => {
                let data = baTable.table.data;
                console.log(data)
            }
        }, '批量更改状态'),
        
    ]);
}
</script>



<style scoped lang="scss">
// :deep(.batch-header-btn){
//     color: red; cursor: pointer; 
//     font-weight: normal;
//     background: #d9d9d9; 
//     padding: 5px 20px; display: inline-block; color: #333; font-size: 14px; border-radius: 3px;
//     transition: 0.5s;
// }
// :deep(.batch-header-btn:hover){
//     background: #909399;
//     color: #fff;
//     transition: 0.5s
// }

:deep(.el-image){
    width: 70px;
    height: unset;
}


.operate-btn .span{
    cursor: pointer;
    user-select: none;
}

.operate-btn > div > span{
    margin-bottom: 5px;
    display: inline-block;
    margin: 0px 5px 8px 0px;
}
.confirm-btn > button{
    // position: absolute;
    // bottom: 0;
    // width: 100%;
    // left: 20px;
    // right: 20px;
    padding: 12px 50px;
}
:deep(.btn) {
    padding: 0 12px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
}
.withdraw-box{
    margin-bottom: 15px;
}
.mb-12{
    margin-bottom: 12px;
}
.mr-5{
    margin-right: 5px;
}
:deep(.el-form-item__label){
    padding-right: 5px;
}
:deep(.el-table .note.el-table__cell){
    vertical-align: unset;
}

:deep(.ba-table-box .el-scrollbar__bar.is-horizontal){
    display: block!important;
    position: fixed!important;
    height: 16px;
}
:deep(.merge-box .is-horizontal){
    position: fixed;
}
:deep(.splite-record .is-horizontal){
    position: relative;
}
:deep(.splite-record.ba-operate-dialog .el-dialog__body){
    padding-bottom: 0;
}
:deep(.el-scrollbar__bar.is-horizontal){
    height: 16px;
    margin-left: 11.5px;
}
.merge-box::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
    opacity: 0.2;
}
.merge-box::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0.2;
    cursor: pointer;
}
.note-content-box::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
    opacity: 0.2;
}
.note-content-box::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0.2;
    cursor: pointer;
}
:deep(.el-table){
}

:deep(.operate-log-dialog.ba-operate-dialog .el-dialog__body) {
    height: auto;
    padding-top: 0;
    padding-bottom: 20px;
}






:deep(.splite-record){
    // overflow: auto;
}
:deep(.sss){
    height: 100%;
}

:deep(.splite-record .el-scrollbar__bar.is-horizontal){
    // display: block!important;
    // position: fixed;
    bottom: 16px;
    height: 16px;
}
:deep(.splite-record .is-horizontal){
    position: relative;
}
:deep(.splite-record.ba-operate-dialog .el-dialog__body){
    padding-bottom: 0;
}
.splite-record::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
    opacity: 0.2;
}
.splite-record::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0.2;
    height: 28px;
    cursor: pointer;
}

</style>
